import { FC, useState, DragEvent, ReactNode } from 'react'
import classNames from 'classnames'
interface DraggerProps {
  onFile: (files: FileList) => void // 上传文件
  children?: ReactNode
}

export const Dragger: FC<DraggerProps> = (props) => {
  const { onFile, children } = props
  const [dragOver, setDragOver] = useState(false) // 是否拖拽
  const klass = classNames('dog-uploader-dragger', {
    'is-dragover': dragOver
  })
  // 拖拽
  const handleDrop = (e: DragEvent<HTMLElement>) => {
    console.log('dropping ~~~~~~')
    e.preventDefault()
    setDragOver(false) // 拖拽结束
    onFile(e.dataTransfer.files) // 回调 ~ 上传文件
  }
  // 拖拽改变
  const handleDrag = (e: DragEvent<HTMLElement>, over: boolean) => {
    console.log('over', over)
    e.preventDefault()
    setDragOver(over) // 拖拽中
  }
  return (
    <div
      className={klass}
      onDragOver={(e) => handleDrag(e, true)}
      onDragLeave={(e) => handleDrag(e, false)}
      onDrop={handleDrop} // drop 事件
    >
      {children}
    </div>
  )
}

export default Dragger
